import React, {useState, useRef, useEffect,} from 'react'
import './VodCard.css'
import {connect,} from 'react-redux'

// icons
import FireIcon from "../../res/images/web/shared/fire.png"
import PlayBtn from "../../res/images/web/VodCard/按钮／开始@2x.png"
import SrcIcon from "../../res/images/web/VodCard/16＊16@2x.png"
// import './BgNewsCard.css'
import {WhiteSpace} from "antd-mobile";
import LocalStorageService from "../../utils/LocalStorageService";

// class VodCard {
//
// }


const VodCard = (props) => {
    const {video,} = props

    const {Title, Url, Titleimg, Src,} = video
    // const {video_src = ''} = video_info
    // const isMp4 = video_src.endsWith('.mp4')

    let [vodPlay, setVodPlay,] = useState(false)
    let [played, setPlayed] = useState(false)
    let videoTag = useRef(null)
    let videoCtn = useRef(null)

    useEffect(() => {
        videoTag.current.setAttribute('playsinline', '')
        videoTag.current.setAttribute('webkit-playsinline', '')
        videoTag.current.setAttribute('x5-playsinline', '')
        videoTag.current.setAttribute('x-webkit-airplay', 'allow')
        // videoTag.current.setAttribute('preload', 'auto')
    }, [])

    useEffect(() => {
        if (!props.isPlay) {
            const v = videoTag.current
            v.pause()
        }
    }, [props.isPlay])

    const playVideo = (id) => {
        props.onPlay(id)
        const v = videoTag.current
        const login = LocalStorageService.get('isLogin')
        if (!played && login) {
            props.doGetVodExp()
        }
        setVodPlay(true)
        v.play()
        setPlayed(true)
    }

    const onPause = () => {
        setVodPlay(false)
    }

    const btn = <img
        className='vod-card-lg-play-btn'
        src={PlayBtn}
        alt=''
        onClick={(e) => playVideo(video.Id)}
    />

    const src = <div
        style={{
            position: 'absolute',
            bottom: 15,
            left: 15,
            display: 'flex',
            alignItems: 'center',
        }}
    >
        <img src={SrcIcon} alt='' style={{width: '16px'}}/>
        <span style={{color: '#fff', marginLeft: '4px', fontSize: '12px',}}>{Src}</span>
    </div>

    const vodStyle = vodPlay || played ? 'vod-card-lg' : 'vod-card-lg vod-card-lg-modal'

    return <div
        style={{
            position: 'relative',
            height: '200px',
            borderRadius: '8px',
            background: played ? '' : `url(${Titleimg}) center/cover`,
        }}
        className={vodStyle}
        ref={videoCtn}
    >
        {vodPlay ? null : <span
            style={{
                fontSize: '16px',
                color: '#fff',
                fontWeight: 'bold',
                lineHeight: '20px',
                position: 'absolute',
                top: '8px',
                left: '8px',
            }}
        >{Title}</span>}
        {vodPlay ? null : btn}
        <video
            style={{
                opacity: vodPlay || played ? 1 : 0,
            }}
            src={Url}
            autoPlay={false}
            // controls
            controls={vodPlay || played}
            className='vod-card-lg'
            ref={videoTag}
            // poster={Titleimg}
            onPause={() => onPause()}
            onTimeUpdate={() => setVodPlay(true)}
        />
        {vodPlay ? null : src}
    </div>
}

const mapState = (state) => ({
    exp: state.exp,
})
const mapDispatch = (dispatch) => ({
    doGetVodExp: (payload) => dispatch.exp.doGetVodExp(payload),
})

export default connect(mapState, mapDispatch)(VodCard)
